Section top bar
canonComposable bar with title, chips, search, dividers and spacer.
Four screens hand-roll the identity instead of SectionTopBarTitle — decision A6. Phone two-step (AD 27 Sep 2026, acrm !3997, fix/nastaveni-mobil-dvoukrok): Nastavení (SettingsLayout.tsx) below the 720px breakpoint drops the side rail and becomes ⌘K's own two-step — `/nastaveni` with no section shows only the grouped menu full-width (`.nastaveni-page.m-menu`), `/nastaveni/<sekce>` shows only that section's `SectionTopBar` (`flat`) and body (`.m-section`) with a quiet `IconButton icon="arrow-left"` (`.set-back`) as the bar's first item, wired to `navigate('/nastaveni')`. Desktop keeps rail + content side by side unchanged. Side rail at ≥720px would take ~260px on a 390px phone and clip every section's fields — the same two-step shape as the ⌘K palette's list→detail step, not a new pattern. acrm !4029 (27 Sep 2026): new app-only layer apps/web/src/ds/section-top-bar.css (home for bar rules; ds.css is over the 100 kB ratchet and must not grow) — a long name in the bar stays on one line with an ellipsis and SectionTopBarTitle carries `title` with the full name; switch labels in the bar do not wrap. acrm !4044 (27 Sep 2026): the record view switcher on person/company (Activities / Profile) is the canonical `.tchip` with chevron (RULES §8: a switcher in the bar = .tchip + menu), the bespoke `.rvsw-*` was deleted. Menu items without description text (acrm !4051). Phone layout, Attio pattern (owner 2026-09-28, acrm !4088): actions as data — primaryAction {label, icon, onClick, kind} → Fab below 720 px (round only for kind 'create'), secondaryActions (menuOnly, danger, phoneOnly) → one ⋮ bottom sheet, closeAction last; row 1 = title + ⋮, row 2 = tools (view picker left, Filtr/Řadit right). Desktop unchanged. PageHeader forwards the same props. 14 Oct 2026 (owner "schvaleno" 24b v4, proto/detail-jednotne@9600c16a2, acrm !5055; RULES §26): record detail header = ↑↓ · name · ⋮ · ✕ with NO blue primary. Rare actions stay in context (Nový obchod in Nejbližší aktivita + Obchody tab; project Aktualizace in its section); an order shows one button only for the step it waits for. Dev check 14 Oct 1440 + 390: person, company, project, order — 0 primaries in the header, the project label chip gone. Registry repaired 17 Oct 2026 (review F5): PageHeader, RecordCloseButton live in apps/web (see files), not exported by @acrm/ui; dropped from react[]. 20 Oct 2026 (ACRM-569, proto/komunikace-menu-zobrazit-vse@0b7180f3a): `SectionTopBarTitle dot` — identity by colour with no glyph (`.pipe-dot`, a 12 px circle inside the `--tile-sm` frame, CSS in apps/web/src/ds/section-top-bar-dot.css); used by a mail label list. Story: "With dot".
Used in 64 files · 56 areas · 118× — components/ListSearch, components/accounting, components/agent-desk, components/datamart, components/segment, pages/AccountingInvoiceDetailPage …
@acrm/ui <SectionTopBar> <SectionTopBarChip> <SectionTopBarSearch> <SectionTopBarDivider> <SectionTopBarSpacer>.tbar .tchip .acrm-input .vspace +7SourceStoryLegacy card Section top bar.htmlImport
import { SectionTopBar, SectionTopBarChip, SectionTopBarSearch, SectionTopBarDivider, SectionTopBarSpacer } from '@acrm/ui'Props
SectionTopBar packages/ui/src/components/SectionTopBar.tsx
| Name | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Identita vlevo — typicky <SectionTopBarTitle> (samotný, nebo jako trigger PickerMenu). |
children | ReactNode | — | Ovládání: <NavSelect> / <SectionTopBarChip> / <SectionTopBarSearch>, oddělené <SectionTopBarDivider>; <SectionTopBarSpacer> zarovná zbytek doprava. |
primaryAction | ReactNode | SectionTopBarPrimary | — | Nejvýš JEDNA primární akce. Jako DATA ({label, icon, onClick, kind?}) je na desktopu tlačítkem v liště a pod 720 px plovoucím Fab vpravo dole — kulatý „+" jen pro kind: 'create', jinak rozšířený s popiskem (vzor Attio, schváleno 28. 9. 2026). Jako JSX (DS <Button variant="primary">) stojí v liště na všech šířkách — jen pro lišty, které ještě nejsou převedené. |
secondaryActions | SectionTopBarAction[] | — | Vedlejší akce lišty (Vytvořit segment, Sdílet…). Na desktopu tlačítka před primárem (menuOnly v ⋮); pod 720 px JEDNA nabídka ⋮ „Další akce" se všemi (spodní šuplík, i jediná položka). Lišta na telefonu = název (výpustka) + ⋮, nástroje na 2. řádku (ds/section-top-bar.css). |
closeAction | ReactNode | — | Zavírací × detailu — vždy poslední prvek lišty na všech šířkách (lišta s akcemi jako daty). |
flat | boolean | — | Bez spodní vlasové linky (.tbar.flat). |
className | string | — | — |
style | CSSProperties | — | — |
SectionTopBarChip packages/ui/src/components/SectionTopBar.tsx
| Name | Type | Default | Description |
|---|---|---|---|
icon | string | — | Ikona chipu (DS Tabler name). |
label | string | — | Tlumený klíč (.k) — „Řadit“ / „Filtr“. |
value | string | — | Zvýrazněná hodnota (.v) — „Vytvořeno“ / „Kanban“ / počet filtrů. |
chevron | boolean | — | Chevron — chip otevírá menu. |
open | boolean | — | Otevřené menu (styling .open). |
onClick | () => void | — | — |
className | string | — | — |
SectionTopBarSearch packages/ui/src/components/SectionTopBar.tsx
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | — |
ariaLabel | string | — | Přístupný popisek inputu — řekni kontext („Hledat ve firmách“). |
value | string | — | Řízené (value+onChange) NEBO display-only (value bez onChange = readOnly zobrazení). |
defaultValue | string | — | Neřízené — počáteční hodnota. |
onChange | (value: string) => void | — | — |
onKeyDown | (e: KeyboardEvent<HTMLInputElement>) => void | — | Klávesy inputu — např. submit-on-Enter. |
onFocus | (e: FocusEvent<HTMLInputElement, Element>) => void | — | — |
inputRef | Ref<HTMLInputElement> | — | Ref na input — programový focus (např. „/" hotkey). |
name | string | — | — |
id | string | — | — |
className | string | — | — |
SectionTopBarDivider packages/ui/src/components/SectionTopBar.tsx
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | — |
SectionTopBarSpacer packages/ui/src/components/SectionTopBar.tsx
Only the inherited HTML attributes.
CSS classes
Files
packages/ui/src/components/SectionTopBar.tsxapps/web/src/components/PageHeader.tsxapps/web/src/components/record/RecordCloseButton.tsxapps/web/src/ds.cssapps/web/src/ds/section-top-bar.css